<template>
  <div class="admin-login_item4">
    <div class="four-left">
      <div class="four-left-line1">欢迎进入</div>
      <div class="four-left-line2">阿拉博数后台服务系统</div>
    </div>
    <div class="four-right">
      <div class="four-right_boxc">
        <div class="four-right_boxc-heda">
          <div class="heda-line3">登录</div>
          <div class="heda-line4">欢迎登录阿拉博数后台服务系统</div>
        </div>
        <div class="four-right_boxc-bodey">
          <div class="bodey-line5">用户名</div>
          <input class="bodey-line6" v-model="user.username" placeholder="请输入您的用户名" />
          <div class="bodey-line5">密码</div>
          <input class="bodey-line6" v-model="user.password" type="password" placeholder="请输入您的密码" />

        </div>
        <div class="">
          <el-checkbox class="four-right_boxc-check" v-model="checked">我已阅读《阿拉博数企业服务条款》</el-checkbox>
        </div>
        <div class="">
           <el-button class="four-login" @click="onSubmit" :loading="loading">登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
   export default {
      data() {
        return {
          loading: false,
          checked: false,
          user: {
          	username: '',
          	password: ''
          }
        }
      },
      mounted() {
      	this.init()
      },
      methods: {
        async onSubmit() {
          if (this.checked) {
            this.loading = true
            await this.$ala.userLogin(this.user)
            this.loading = false
            await this.$emit('afterLogin')
          } else {
            this.$alert('请勾选服务条款', '提示！', {
              confirmButtonText: '确定'
            })
          }
        }
      }
    }
</script>

<style lang="scss">
  .admin-login_item4 {
    position: relative;
    width: 100%;
    height: 100%;
    min-width:1500px;
    display: flex;
    flex-direction: row;
    background: url("https://diyapi.5ug.com/wwwroot/uploads/api/256-116-382/2022-02-17/620de4a2051295f5552898e4.png");
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    .four-left {
      top: 18%;
      left: 80px;
      position: absolute;
      .four-left-line1{
        font-size: 26px;
        color: #FFFFFF;
        line-height: 60px;
      }
      .four-left-line2{
        font-size: 26px;
        color: #FFFFFF;
        line-height: 60px;
      }
    }
    .four-right {
      flex: 1;
      min-width: 0;
      position: relative;
      .four-right_boxc {
        //width: 400px;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -50%);
        .four-right_boxc-heda {
          padding: 40px 0px;
          .heda-line3{
            font-size: 30px;
            font-weight: bold;
            color: #000000;
          }
          .heda-line4{
            font-size: 15px;
            color: #CCCCCC;
            line-height: 30px;
          }
        }
        .four-right_boxc-bodey{
          margin-left: 35%;
          .bodey-line5{
            padding-top: 10px;
            font-size: 16px;
            line-height: 30px;
          }
          .bodey-line6{
            border-radius: 5px;
            width: 320px;
            color: #000;
            font-size: 14px;
            padding: 5px 10px;
            line-height: 20px;
            border: 2px solid #aaaaff;
          }
        }
        .four-right_boxc-check {
          margin-top: 10px;
        }
        .four-login{
          position: relative;
          top: 20px;
          left: 55px;
          width: 320px;
          height: 40px;
          //font-size: 25px;
          border-radius: 5px;
          background:linear-gradient(left, #43A0DF,#3258DD)
        }
      }
    }
  }
</style>
